<template>
	<view class="share-wrap page-bg">
		<view class="share-canvas" id='share-canvas' @click="html2Canvas">
			<image class="page-bg__img" :src="shareBg" mode=""></image>
			<view class="share-con">
				<view class="share-name">{{userInfo.nickName}}</view>
				<view class="share-qrcode page-bg__code">
					<tki-qrcode ref="qrcode" :val="val" :size="size" unit="upx" background="#ffffff" :icon="icon" :loadMake='loadMake'
					 @result="qrR" />
				</view>
				<view class="share-invitation">邀请码： {{userInfo.userPhone}}</view>
			</view>
		</view>
		<view class='share-img' v-if="isShow" @click.stop="close(false)">
			<image @click.stop="close(true)" class='img img-active' :src='shareImgSrc'></image>
			<view @click.stop="close(true)" class='tipsText'>长按保存图片、识别二维码</view>
		</view>

	</view>
</template>

<script>
	// #ifdef H5 
	import html2canvas from 'html2canvas'
	let jweixin = require('jweixin-module')  
	// #endif 
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
	import common from '../../utils/common.js'
	import { api } from '../../utils/api.js'
	export default {
		data() {
			return {
				userInfo: {},
				shareImgSrc: '',
				isShow: false,
				serverHost: '',
				val: common.apiHost + 'm/#/',
				size: 300,
				icon: '',
				iconSize: 50,
				loadMake: true,
				shareBg: ''
			}
		},
		
		onLoad() {
			let userInfo = common.getUserInfo()
			this.userInfo = userInfo
			this.val = common.apiHost + 'm/#/?sourceUserId=' + userInfo.id
			this.shareBg = common.apiHost + 'bg/share.png'
		},
		
		async onShow() {
		    await this.getJsApiParam()
		    await this.share()
		},
		
		methods: {
			
			qrR(res) {
				// console.log(res)
			},
			
			close(status) {
				this.isShow = status
			},

			html2Canvas() {
				let shareContent = document.getElementById('share-canvas'); //需要截图的包裹的（原生的）DOM 对象
				//let shareContent = document.getElementById('share-canvas'); //需要截图的包裹的（原生的）DOM 对象
				console.log(shareContent)
				let width = shareContent.offsetWidth; //获取dom 宽度
				let height = shareContent.offsetHeight; //获取dom 高度

				let opts = {
					scale: 1, // 添加的scale 参数
					logging: true, //日志开关
					width: width, //dom 原始宽度
					height: height, //dom 原始高度
					backgroundColor: 'transparent',
					useCORS: true,
					allowTaint: true,
					logging: false,
				};
				const that = this;
				this.$showToast('海报生成中...')
				html2canvas(shareContent, opts).then(canvas => {
					uni.hideLoading()
					that.isShow = true
					let shareImgSrc = canvas.toDataURL('image/jpeg')
					that.shareImgSrc = shareImgSrc
					this.$showToast('海报生成成功')
				})
			},
			
			getJsApiParam(callback) {
				let currentUrl = window.location.href
				uni.request({
				    url: common.apiHost + `wechat/getWxJsApiParams?curUrl=${currentUrl}` ,
				    data: { curUrl: currentUrl },
					method: 'GET',
				    success: (res) => {
						console.log('res');
						console.log(res.data.result);
				        res = res.data.result	
					   jweixin.config({
						 debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						 appId: res.appId, // 必填，公众号的唯一标识
						 timestamp: res.timestamp, // 必填，生成签名的时间戳
						 nonceStr: res.nonceStr, // 必填，生成签名的随机串
						 signature: res.signature,// 必填，签名
						 jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 必填，需要使用的JS接口列表
						 // jsApiList: 'updateAppMessageShareData,updateTimelineShareData'.split(',')
					   });
				    }
				});
			},
					
			share() {
				let that = this
				let title = common.companyName
				let desc = '您的好友<'+that.userInfo.nickName+'>邀请你一起拼团购物!'
				let link = common.apiHost + `m/?#/?sourceUserId=${that.userInfo.id}`
				let imgUrl = common.apiHost + 'bg/logo.jpg'
				let shareData = {
					title, // 分享标题
					desc, // 分享描述
					link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl, // 分享图标
					success: function () {
					  // 设置成功
					  // that.$showToast(`页面分享成功, 分享链接为${link}`)
					},
					cancel: function() {
					}
				}
				jweixin.ready(function () {   //需在用户可能点击分享按钮前就先调用
				  jweixin.updateAppMessageShareData(shareData)
				  jweixin.updateTimelineShareData(shareData)
				});
			}
		
		},
		
		components: {
			'tki-qrcode': tkiQrcode
		}
	}
</script>

<style scoped lang="less">
	@import '../../app.less';

	.share-wrap {
		width: 100vw;
		height: calc(100vh - 100rpx);
	}

	.share-canvas{
		width: 100%;
		height: 100%;
		.flex-base;
		justify-content: flex-end;
		flex-direction: column;
	}
	.page-bg__img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.share-con {
		color: @f;
		position: relative;
		margin-bottom: 15%;
		text-align: center;
		    display: flex;
		    flex-direction: column;
		    align-items: center;
		.share-name {
			.f30;
		}

		.share-qrcode {
			margin: 30rpx 0;
			background-color: @f;
			padding: 10rpx;
			overflow: hidden;
		}

		.share-invitation {
			.f24;
		}
	}

	.page-bg__code {
		width: 300rpx;
		height: 300rpx;
	}

	.share-img {
		width: 100%;
		height: 100%;
		padding: 25% 10%;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		z-index: 999999;
		background: rgba(0,0,0,0.6);
		.img{
			display: block;
			width: 100%;
			height: 100%;
		}
		.tipsText{
			.f24;
			text-align: center;
			color: @f;
			background: @theme-color;
			line-height: 80rpx;
		}
	}
</style>
